<template>
    <el-popover :class="className"
        :placement="placement"
        :width="width"
        :trigger="trigger">
        <el-tabs class="tl-border-radius-8" :style="tabsStyle">
            <el-tab-pane class="tl-text-center" label="支付宝">
                <img class="tl-border-radius-8 tl-width-85-percent"
                     src="~@/assets/images/AlipayCollect.png" alt="">
            </el-tab-pane>
            <el-tab-pane class="tl-text-center" label="微信">
                <img class="tl-border-radius-8 tl-width-85-percent"
                     src="~@/assets/images/WeChatCollect.png" alt="">
            </el-tab-pane>
        </el-tabs>
        <el-button class="reward" slot="reference" type="danger" circle>赏</el-button>
    </el-popover>
</template>

<script>
export default {
    name: 'TlReward',
    props: {
        placement: {
            type: String,
            default: 'bottom'
        },
        width: {
            type: Number,
            default: 200
        },
        trigger: {
            type: String,
            default: 'click'
        },
        className: {
            type: String,
            default: ''
        },
        tabsStyle: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {}
    },
    methods: {},
    created () {
    }
}
</script>

<style lang='less' scoped>
.reward {
    box-shadow: 0 0 10px 6px rgba(31, 45, 61, .1), 0 0 0 -1px rgba(32, 160, 255, .2), 0 0 0 -25px rgba(32, 160, 255, .3);
    transition: all .25s, box-shadow 0s;

    &:hover {
        box-shadow: 0 0 20px rgba(32, 160, 255, .3), 0 0 0 25px rgba(32, 160, 255, 0), 0 0 0 25px rgba(32, 160, 255, 0);
        transition: all 1s, box-shadow 1s ease-out .1s;
    }
}
.el-tabs {
    //border: 1px solid #F2711C;

    ::v-deep .el-tabs__header {
        margin: auto auto 15px auto !important;
        width: 56% !important;
    }

    img {
        border: 1px solid rgba(0, 0, 0, .1) !important;
    }

    ::v-deep .el-tabs__active-bar {
        width: 42px !important;
    }
}
</style>
